<template>
	<view class="content">
		<view class="nav">
			<!-- <view class="col">
				<view :class="{ active: queryType==1 }" @click="selType(1)">全部</view>
			</view> -->
			<view class="col">
				<view :class="{ active: queryType==2 }" @click="selType(2)">待制作</view>
			</view>
			<view class="col">
				<view :class="{ active: queryType==3 }" @click="selType(3)">已完成</view>
			</view>
		</view>

		<view class="order-list">
			<uni-card v-for="item in page.records" :title="'排队号：'+item.queueNumber" :extra="item.orderStatusName" class="item"
				:class="{ statusColor: item.statusActive }">
				<view :class="(value.status==3 && queryType==2)?'goods unpaid':'goods'" v-for="value in item.goodsList">
					<view class="title">
						{{value.goodsName}}
					</view>
					<view class="remark">
						<text style="margin-right:10px;" v-if="value.remark">{{value.remark}}</text><uni-icons @click="inputDialogToggle(value)" type="compose" size="16" v-if="value.status==1 && item.orderStatus==5"></uni-icons>
					</view>
					<view class="money">
						<view class="left"><text class="price-active">{{value.goodsNum}}</text>份</view>
						<view class="right">
							<button v-if="value.status==1" @click="orderGoodsStatusEnd(value.id)" type="warn" size="mini">完成制作</button>
							<button v-if="value.status==3" type="default" :plain="true" size="mini" disabled="true" style="width:87px;">已制作</button>
						</view>
					</view>
					
				</view>

				<view class="total">
					<view class="money">总计：{{item.totalGoodsNum}}份 {{item.totalMoney/100}}元</view>
					<view class="btn">
						<text @click="cancelOrder(item.orderNo)" v-show="item.showCancelBtn">取消订单</text>
						<text @click="toOrderDetail(item.orderNo)" style="margin-left:10px;">详情</text>
						
					</view>
				</view>
				
			</uni-card>
		</view>

		<uni-load-more :status="status" />
		
		
		<view>
			<!-- 输入框示例 -->
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose"  mode="input" title="备注内容" :value="updateOrderGoodsInfo.remark"
					placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog>
			</uni-popup>
		</view>

	</view>
</template>

<script>
	import { OrderApi } from '@/api/food/OrderApi'

	export default {
		data() {
			return {
				Config: this.$Config,
				Common: this.$Common,
				Auth: this.$Auth,
				ShareUtil: this.$ShareUtil,
				State: this.$store.state,
				Dict: this.$Dict,
					
				page: {
					total: 0,
					size: 5,
					current: 1,
					pages: 2,
					records: []
				},
				orderStatus: 5,
				queryType: 2,
				status: 'more',
				updateOrderGoodsInfo:{
					id:0,
					remark:''
				}
			}
		},
		onLoad() {
			this.initPage()
		},
		onPullDownRefresh() {
			this.page.current = 1
			this.page.pages = 2
			this.getPage()
		},
		onReachBottom() {
			if (this.page.current != this.page.pages) {
				this.page.current++
				this.getPage()
			}
		},
		methods: {
			initPage: function() {
				this.getPage()
			},
			selType(queryType) {
				this.queryType = queryType
				if (queryType == 1) {
					this.orderStatus = ''
				} else if (queryType == 2) {
					this.orderStatus = 5
				} else if (queryType == 3) {
					this.orderStatus = 10
				}

				this.page.current = 1
				this.page.pages = 2
				this.getPage()
			},

			getPage() {
				let that = this

				if (that.page.current > that.page.pages) {
					return false
				}

				let param = {
					pageIndex: this.page.current,
					pageSize: this.page.size,
					orderStatus: this.orderStatus,
					expressStatus: this.expressStatus,
					isQueryGoodsList: true
				};

				that.status = 'loading'
                OrderApi.getPage(param).then((response) => {
					response.records.forEach(item => {
						if (item.progressStatus == '待确认' || item.progressStatus == '待发货' || item
							.progressStatus == '待收货') {
							item.statusActive = true
						} else {
							item.statusActive = false
						}
					})

					if (that.page.current == 1) {
						that.page = response
					} else {
						that.page.records = that.page.records.concat(response.records)
					}

					if (that.page.current == that.page.pages || that.page.pages == 0) {
						that.status = 'noMore'
					} else {
						that.status = 'more'
					}
				})
			},

			cancelOrder(orderNo) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定取消订单吗？',
					success: function(res) {
						if (res.confirm) {
                            OrderApi.cancelOrder({
								orderNo: orderNo
							}).then((response) => {
								that.getPage()
							})
						}
					}
				})
			},

			deleteOrder(orderNo) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定删除订单吗？',
					success: function(res) {
						if (res.confirm) {
                            OrderApi.deleteOrder({
								orderNo: orderNo
							}).then((response) => {
								that.getPage()
							})
						}
					}
				})
			},

			orderGoodsStatusEnd(id) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定已做好菜品吗？',
					success: function(res) {
						if (res.confirm) {
                            OrderApi.orderGoodsStatusEnd(id).then((response) => {
								that.getPage()
							})
						}
					}
				})
			},
			toOrderDetail(orderNo) {
				uni.navigateTo({
					url: '/pages/food/OrderDetail?orderNo=' + orderNo
				});
			},
			toPay(orderNo) {
				uni.navigateTo({
					url: '/pages/index/QrcodePay'
				});
			},
			inputDialogToggle(obj) {
				this.updateOrderGoodsInfo = obj
				this.$refs.inputDialog.open()
			},
			dialogInputConfirm(e) {
				let that = this
				
				this.updateOrderGoodsInfo.remark = e
				
				OrderApi.updateOrderGoodsRemark(this.updateOrderGoodsInfo).then((response) => {
					that.getPage()
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		padding-bottom: 20px;
	}
	.nav {
		width: 100%;
		height: 40px;
		line-height: 40px;
		position: fixed;
		z-index: 1;
		
		// #ifdef H5
		top:40px;
		// #endif
		
		// #ifdef APP-PLUS
		top:0px;
		// #endif
		
		left: 0px;
		text-align: center;
		display: flex;
		background-color: #FFF;
	}
	.nav .col {
		flex: 1;
	}
	.nav .col view {
		font-size: 16px;
	}
	.nav .active {
		font-weight: bold;
		position: relative;
	}
	.nav .active:after {
		display: block;
		content: "";
		width: 20px;
		height: 3px;
		background-color: $uni-global-color;
		position: absolute;
		left: 50%;
		top: 32px;
		margin-left: -10px;
	}
	.order-list {
		margin-top: 54px;
	}
	.order-list .item .goods {
		padding: 20rpx 0;
		
		border-bottom:1px solid #EEE;
	}
	.order-list .item .goods .title {
		font-weight:bold;
		font-size:44rpx;
	}
	.order-list .item .unpaid .title {
		color:#999;
	}
	.order-list .item .goods .remark {
		color:#D00;
		font-size:32rpx;
		line-height: 36rpx;
		margin:16rpx 0;
	}
	.order-list .item .unpaid .remark {
		color:#999;
	}
	.order-list .item .goods .money {
		display:flex;
		height:30px;
	}
	.order-list .item .goods .money .left {
		flex: 1;
		font-weight:bold;
		font-size:14px; color:#999;
	}
	.order-list .item .goods .money .left text {
		flex: 1;
		font-size:18px;
		font-weight:bold;
	}
	.order-list .item .goods .money .left .price-active {
		color:#e43d33;
	}
	.order-list .item .unpaid .money .left .price-active {
		color:#999;
	}
	.order-list .item .goods .money .right {
		flex: 1;
		text-align:right;
	}
	.order-list .item .total{ display:flex;justify-content: space-between;
		margin-top:10px; padding-top:10px; 
	}
	.order-list .item .total .money{font-size:14px;}
	
	.order-list .item .total .btn {
		text-align: right;
		font-size:14px;
	}
	.order-list .item .btn button {
		margin-left: 10px;
	}
	::v-deep .order-list .statusColor .uni-card__header-extra-text {
		color: #FD3434 !important;
	}
</style>
